import React from 'react'
import {Button} from 'antd'
import IconDom from '../../../component/IconDom'

class ProcessBar extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    }
  }

  render () {
    let {step, fromPage, basicCompleteStaus, serviceCompleteStaus, saleCompleteStaus, tab} = this.props
    return <div className='mb20'>
      <div className='grey-bg' />
      <div className='process'>
        <span
          onClick={() => tab(1)}
          className={step === 1
            ? 'process-item active-process'
            : 'process-item'}>
          <span
            className={basicCompleteStaus
              ? 'finish-status'
              : 'process-icon'}>
            <IconDom
              code={basicCompleteStaus
                ? 'icon-tick'
                : 'icon-jichuxinxi'} />
          </span>
          <span className='ml10 process-text'>Basic Information
      </span>
        </span>

        <span className='process-divider' />

        <span
          onClick={() => {
            serviceCompleteStaus && tab(2)
          }}
          className={step === 2
            ? 'process-item active-process'
            : 'process-item'}>
          <span
            className={serviceCompleteStaus
              ? 'finish-status'
              : 'process-icon'}>
            <IconDom
              code={serviceCompleteStaus
              ? 'icon-tick'
              : 'icon-icon_Defineservice'} />
          </span>
          <span className='ml10 process-text'>
          Define Service
      </span>
        </span>

        <span className='process-divider' />

        <span
          onClick={() => {
            saleCompleteStaus && tab(3)
          }}
          className={step === 3
            ? 'process-item active-process'
            : 'process-item'}>
          <span
            className={saleCompleteStaus
              ? 'finish-status'
              : 'process-icon'}>
            <IconDom
              code={saleCompleteStaus
                ? 'icon-tick'
                : 'icon-xiaoshouxinxi'} />
          </span>
          <span className='ml10 process-text'>
          Sale Information
      </span>
        </span>
        {
          fromPage !== 'callback'
            ? <span className='process-btns'>
              <Button
                onClick={this.props.showPreview}
                className='pre-btn'>Preview</Button>
              <Button
                style={{'color': '#0094FF'}}
                onClick={this.props.save}
                className='ml20 pub-btn'>Save</Button>
            </span>
            : ''
        }

      </div>
    </div>
  }
}

export default ProcessBar
